<template>
  <div class="guide">
    <v-touch @swipeleft="toNext" @swiperight="toPrev">
      <transition name="fade">
        <component :is="currentComponent" :key="currentIndex"></component>
      </transition>
    </v-touch>
  </div>
</template>

<script>
import Guide1 from "@/components/guide/Guide1.vue";
import Guide2 from "@/components/guide/Guide2.vue";
import Guide3 from "@/components/guide/Guide3.vue";
import Guide4 from "@/components/guide/Guide4.vue";
import Guide5 from "@/components/guide/Guide5.vue";

export default {
  name: "Guide",
  data() {
    return {
      arr: ["Guide1", "Guide2", "Guide3", "Guide4", "Guide5"],
      currentComponent: "Guide1",
      currentIndex: 0,
      timer: null,
    };
  },
  mounted() {
    //设置定时器
    this.timer = setInterval(this.toNext, 4000);
  },
  //页面销毁清除定时器
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    toNext() {
      if (this.currentIndex < this.arr.length - 1) {
        this.currentIndex++;
        this.currentComponent = this.arr[this.currentIndex];
      } else {
        clearInterval(this.timer);
      }
    },
    toPrev() {
      if(this.currentIndex){
        this.currentIndex --;
        this.currentComponent = this.arr[this.currentIndex]
      }
    },
  },
  	components: {
			Guide1,
			Guide2,
			Guide3,
			Guide4,
			Guide5
		},
};
</script>

<style scoped>
.guide {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.8s;
}
.fade-enter {
  left: 100vw;
}
.fade-enter-to {
  left: 0;
}
/* .fade-leave{

} */
.fade-leave-to {
  transform: translateX(-100vw);
}
</style>